<template>
  <div>
    <div>
      <el-card class="header" shadow="never">
        <div class="text item" style="height: 15px">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            v-if="this.$route.path != '/home'"
          >
            <el-breadcrumb-item :to="{ path: '/home' }">
              首页
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.name }}</el-breadcrumb-item>
            <el-dropdown style="float: right" @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎您：{{ username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="updatePwd"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
            <el-breadcrumb-item :to="{ path: '/home' }">
              首页
            </el-breadcrumb-item>
            <el-dropdown style="float: right" @command="handleCommand">
              <span class="el-dropdown-link">
                欢迎您：{{ username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="updatePwd"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-breadcrumb>
        </div>
      </el-card>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisibleEdit"
      width="400px"
      center
    >
      <el-form
        :model="formData"
        ref="formData"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item prop="oldPwd" label="原密码" size="small">
          <el-input
            v-model="formData.oldPwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="newPwd" label="新密码" size="small">
          <el-input
            v-model="formData.newPwd"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="newPwd1" label="确认密码" size="small">
          <el-input
            v-model="formData.newPwd1"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="dialogFormVisibleEdit = false"
          >取消</el-button
        >
        <el-button size="mini" type="primary" @click="handleEdit"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: JSON.parse(sessionStorage.getItem("user")).username,
      dialogFormVisibleEdit: false,
      formData: {
        id: "",
        oldPwd: "",
        newPwd: "",
        newPwd1: "",
      },
      rules: {
        oldPwd: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        newPwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        newPwd1: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleEdit() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          if (this.formData.newPwd == this.formData.newPwd1) {
            this.$put("admin/pwd", this.formData).then((res) => {
              if (res.code == 200) {
                this.dialogFormVisible4Edit = false;
              }
            });
          } else {
            this.$message.error("两次密码输入不一致，请检查!");
          }
        } else {
          this.$message.error("数据校验失败，请检查!");
        }
      });
    },
    handleCommand(command) {
      if (command == "logout") {
        this.$confirm("您确定要退出吗？", "提示", {
          type: "warning",
        }).then(() => {
          this.$post("admin/logout").then((res) => {
            if (res.code == 200) {
              sessionStorage.removeItem("user");
              sessionStorage.removeItem("tokenStr");
              setTimeout(this.$router.replace("/login"), 2000);
            }
          });
        });
      } else if (command == "updatePwd") {
        this.formData = {};
        this.dialogFormVisibleEdit = true;
      }
    },
  },
};
</script>

<style scoped>
.header {
  position: absolute;
  box-sizing: border-box;
  width: 86.5%;
  left: 13.5%;
  top: 0;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>